<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="a.header.jsp" %>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head> 
 <body>

<div class="layui-btn-group demoTable">
  <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
  <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
  <button class="layui-btn" data-type="isAll">验证是否全选</button>
</div>
  <table class="layui-hide layui-table" lay-filter="test" id="test"></table>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

 <input id="iitest" value="hi">               
          
<script>

layui.use('table', function(){
  var table = layui.table;
  $=layui.$;		//layui内置的jquery
  $('#button').click(function() {
	    alert('Hello');
	});
  table.render({
	    elem: '#test'
	    ,url:'TableServlet'
	    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
	    ,defaultToolbar: []
	    ,title: '用户数据表'
	    ,cols: [[
	      {type: 'checkbox', fixed: 'left'}
	      ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
	      ,{field:'username', title:'用户名', width:120, edit: 'text'}
	      ,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
	        return '<em>'+ res.email +'</em>'
	      }}
	      ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
	      ,{field:'city', title:'城市', width:100}
	      ,{field:'sign', title:'签名',width:80}
	      ,{field:'experience', title:'积分', width:80, sort: true}
	      ,{field:'logins', title:'登入次数', width:100, sort: true}
	      ,{fixed: 'right',title:'操作', toolbar: '#barDemo', width:200}
	    ]]
	    ,page: true
	  });
  
  //监听表格复选框选择
  table.on('checkbox(test)', function(obj){
    console.log(obj)
  });
  //监听工具条
  table.on('tool(test)', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){
      layer.alert('ID：'+ data.id + '<br>名字：'+data.username);      
    } else if(obj.event === 'del'){
      layer.confirm('真的删除ID为：'+data.id+"的用户吗?", function(index){
    	console.log(data.id);
    	 //向服务端发送删除指令
        $.ajax({
            url:'DeleteData',
            type:'get',
            data:{'id':data.id},//向服务端发送删除的id
            success:function(msg){
    			console.log(msg);	
                if(msg== '200'){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    console.log(index);
                    layer.msg("删除成功",{icon:1});
                }
                else{
                    layer.msg("删除失败",{icon:5});
                }
            }
        });
      });
    } else if(obj.event === 'edit'){
//       layer.alert('编辑行：<br>'+ JSON.stringify(data))
 		console.log(data);
 		layer.open({
            type: 2,
            area: ['500px', '700px'],
            title: "更改信息",
            fixed: false, //不固定
            maxmin: true,
            maxmin: false,
            shadeClose:false,
            content: 'jsp.jsp',
            btn: ['确定', '取消'],
            success: function(layero, index){
            	console.log(layero.context, index);
            	var iframeWindow = window['layui-layer-iframe'+ index]  //获取iframe窗口
            	 iframeWindow.params= data									//向子页面传参
            },
            yes: function (index, layero) {
            		alert("ok");
            	}            
          });         
    }
  });
  
	active = {
    getCheckData: function(){ //获取选中数据
      var checkStatus = table.checkStatus('idTest')
      ,data = checkStatus.data;
      layer.alert(JSON.stringify(data));
    }
    ,getCheckLength: function(){ //获取选中数目
      var checkStatus = table.checkStatus('idTest')
      ,data = checkStatus.data;
      layer.msg('选中了：'+ data.length + ' 个');
    }
    ,isAll: function(){ //验证是否全选
      var checkStatus = table.checkStatus('idTest');
      layer.msg(checkStatus.isAll ? '全选': '未全选')
    }
  };
  
  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
});
</script>
</div>
</body>

</html>